import { styled } from 'styled-components'

export const WarpHeader = styled.div`
  display: flex;
  height: 80px;
  align-items: center;
  svg {
    cursor: pointer;
  }
  .left {
    display: flex;
    flex: 1;
    margin-left: 24px;
    color: ${props => props.theme.color.primary};
  }

  .mid {
    display: flex;
    width: 300px;
    height: 46px;
    border: 1px solid #ccc;
    border-radius: 25px;
    justify-content: space-between;
    align-items: center;
    .input-search {
      font-size: 14px;
      margin-left: 20px;
      font-weight: bold;
    }
    .search {
      color: #fff;
      padding: 10px;
      border-radius: 16px;
      margin-right: 5px;
      background-color: ${p => p.theme.color.primary};
      cursor: pointer;
    }
    ${p => p.theme.mixin.boxShadow}
  }

  .right {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    margin-right: 24px;
    align-items: center;
    font-size: 14px;

    .bord-hover {
      padding: 8px 10px;
      border-radius: 20px;
      font-weight: bold;
      cursor: pointer;
      &:hover {
        background-color: #eee;
      }
    }
    .more {
      position: relative;
      display: flex;
      align-items: center;
      border-radius: 25px;
      border: 1px solid #ccc;
      width: 75px;
      height: 40px;
      justify-content: space-around;

      ${props => props.theme.mixin.boxShadow}

      .more-content {
        position: absolute;
        right: 0;
        top: 50px;
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 10px 0;
        background-color: #fff;
        .item {
          display: block;
          width: 240px;
          padding: 10px 20px;
          font-weight: bold;
          box-sizing: border-box;
          color: ${p => p.theme.text.primary};
          cursor: pointer;
          &:hover {
            background-color: #f5f5f5;
          }
        }
        .line {
          display: block;
          height: 1px;
          background-color: #ccc;
          margin: 10px 0;
        }
      }
    }
  }
`
